---
title: "Carousel"
description: A carousel is a sleek, rotating display for images or videos, showcasing one at a time and highlighting multiple pieces of content seamlessly.
published: true
order: 8
references: ["https://react-spectrum.adobe.com/react-aria/ListBox.html#props", "https://www.embla-carousel.com/api/"]
---

## Basic

<How minW60 toUse="media/carousel/carousel-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/carousel
```

## Composed components
<Composed components={['button']}/>

## Manual installation
```bash
npm i react-aria-components embla-carousel-react @heroicons/react
```

<SourceCode toShow='carousel'/>

## Anatomy
```
import {
  Carousel,
  CarouselButton,
  CarouselContent,
  CarouselHandler,
  CarouselItem,
} from "@/components/ui/carousel"
```

```
<Carousel>
  <CarouselContent>
    <CarouselItem className="basis-1/2">Slide 1</CarouselItem>
    <CarouselItem className="basis-1/2">Slide 2</CarouselItem>
    <CarouselItem className="basis-1/2">Slide 3</CarouselItem>
  </CarouselContent>

  <CarouselHandler>
    <CarouselButton segment="previous" />
    <CarouselButton segment="next" />
  </CarouselHandler>
</Carousel>
```

## Orientation
You can change the orientation of the carousel by using the `orientation` prop. The default is horizontal, but you can switch it to vertical.
<How minW60 toUse="media/carousel/carousel-orientation-demo" />

## Options
You want to loop, or align the carouse, don't worry, you can do it with the `opts` prop.
<How withNoPadding={false} toUse="media/carousel/carousel-options-demo" />

## Autoplay
This a plugin by the embla-carousel it self, it's not included in the package, but you can install it to make sure the carousel autoplay.
```bash
npm i embla-carousel-autoplay
```

Once you install it, you can use it with the `plugins` prop.
<How minW60 toUse="media/carousel/carousel-autoplay-demo" />

## Link
If you need a link in carousel item, it simple, add href to the CarouselItem.
```
<CarouselItem href="/path/to/page"/>
```

## API
You can use the carousel api to control the carousel.
<How withNoPadding toUse="media/carousel/carousel-api-demo" />
